<template>
	<view class="top_boos" @click="huise">
		<!-- 顶部 -->
		<view class="mes_top"><uni-nav-bar :border="false" @clickLeft="mes_back" left-icon="left" title="我的消息"></uni-nav-bar></view>
		<!-- 灰背景 -->
		<view class="mes_ash">
			<!-- 消息 -->
			<view class="mes_news">
				<!-- 审批提醒 -->
				<view class="news_approval" v-for="(item, index) in csArr" :key="item.m_id" @click="go_news" @longpress="longtapSp(item.m_type, item.m_id, $event)">
					<!-- <view class="news_approval" v-for="(item, index) in csArr" :key="item.m_id" @click="go_news(item.id)" @longpress="longtap(item.m_id, index, $event)"> -->
					<!-- 圆 -->
					<view class="news_approval_yuan">
						<!-- <text>{{ item.type }}</text> -->
						<image :src="item.img" mode=""></image>
						<text v-if="shenLengthTr">{{ shenLength }}</text>
					</view>
					<view class="news_approval_xunhuan" v-for="(i, index) in arrc" :key="i.id">
						<!-- (item.type=='审批'? arrc :arrc2 ) -->
						<!-- 消息 -->
						<view class="news_approval_news">
							<text>{{ item.title }}</text>
							<view>{{ i.content.slice(0, 30) + '...' }}</view>
							<!-- -->
						</view>
					</view>
				</view>
				<!-- 发起会议 -->
				<view class="news_approval" v-for="(item, index) in csArr2" :key="item.m_id" @click="go_meetingNotice" @longpress="longtapHy(item.m_type, item.m_id, $event)">
					<!-- 圆 -->
					<view class="news_approval_yuan">
						<!-- <text>{{ item.type }}</text> -->
						<image :src="item.img" mode=""></image>
						<text v-if="huiLengthTr">{{ huiLength }}</text>
					</view>
					<view class="news_approval_xunhuan" v-for="(i, index) in arrc2" :key="i.id">
						<!-- (item.type=='审批'? arrc :arrc2 ) -->
						<!-- 消息 -->
						<view class="news_approval_news">
							<text>{{ item.title }}</text>
							<view>{{ i.content.slice(0, 30) + '...' }}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-show="long" id="suspension" :style="{ top: spTop + 'px', left: spLeft + 'px' }">
				<!-- <view :style="{ background: clickColor1 }" @touchstart="bColor1" @touchend="bColorEnd1" @click="zhiding(id)"><text>置顶该消息</text></view> -->
				<!-- <view v-else @click="qxzhiding(id, index)"><text>取消置顶</text></view> -->
				<view v-if="ceshi" :style="{ background: clickColor2 }" @touchstart="bColor2" @touchend="bColorEnd2" @click="yidu(indexText)"><text>标记为已读</text></view>
				<view :style="{ background: clickColor3 }" @touchstart="bColor3" @touchend="bColorEnd3" @click="shanchu(id)"><text>删除该消息</text></view>
				<view :style="{ background: clickColor4 }" @touchstart="bColor4" @touchend="bColorEnd4" @click="quxiao"><text>取消操作</text></view>
			</view>
			<!-- <button type="default" @click="ajaxGet" style="margin: 500rpx 0 0 0;">重新获取 Ajax</button> -->
		</view>
	</view>
</template>

<script>
import { reactive, toRefs, onMounted, watch, computed, onUpdated } from 'vue';
import { useStore } from 'vuex';
import http from '../../utils/http.js';
export default {
	setup() {
		// vuex
		const store = useStore();
		let data = reactive({
			icontent: '',
			ceshi: false,
			hyTop: 0,
			//点击背景色
			clickColor1: '',
			clickColor2: '',
			clickColor3: '',
			clickColor4: '',
			// 审批top
			spTop: 0,
			// 审批left
			spLeft: 0,
			//审批用的
			shenLengthTr: true,
			//会议用的
			huiLengthTr: true,
			//审批长度
			shenLength: 0,
			//会议长度
			huiLength: 0,
			//删除聊天需要的id
			id: 0,
			indexText: '',
			arrk: [],
			arr: [],
			arr2: [],
			// 审批最新消息
			arrc: [],
			// 会议最新消息
			arrc2: [],
			csArr: [],
			csArr2: [],
			// 长按ture
			long: false,
			// 删除消息
			newsdel: true,
			// 返回我的页面
			mes_back() {
				if (!data.long) {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			},
			// 进审批提醒
			go_news() {
				if (!this.long) {
					uni.navigateTo({
						url: '/pages/approval_notice/approval_notice'
					});
				}
			},
			// 进会议通知
			go_meetingNotice() {
				if (!this.long) {
					uni.navigateTo({
						url: '/pages/meeting_notice/meeting_notice'
					});
				}
			},
			// 审批长按事件..
			longtapSp(i, v, e) {
				if (this.shenLengthTr) {
					this.ceshi = true;
				}
				this.long = !this.long;
				data.indexText = i;
				data.id = v;
				data.spTop = e.changedTouches[0].pageY;
				data.spLeft = e.changedTouches[0].pageX;
				if (data.spLeft > 300) {
					data.spLeft = 300;
				}
				// this.id = v;
				// this.index = i;
				// box.style.top=e.changedTouches[0].pageY
			},
			// 会议长按事件..
			longtapHy(i, v, e) {
				if (this.huiLengthTr) {
					this.ceshi = true;
				}
				this.long = !this.long;
				data.indexText = i;
				data.id = v;
				data.spTop = e.changedTouches[0].pageY;
				data.spLeft = e.changedTouches[0].pageX;
				if (data.spLeft > 300) {
					data.spLeft = 300;
				}
				// this.id = v;
				// this.index = i;
				// box.style.top=e.changedTouches[0].pageY
			},
			// 取消操作
			quxiao() {
				this.long = !this.long;
				this.long = false;
				this.ceshi = false;
			},
			// 删除聊天
			shanchu(v) {
				if (v == 1) {
					data.csArr = [];
					data.arrc = [];
				} else {
					data.csArr2 = [];
					data.arrc2 = [];
				}
			},
			// 全局取消删除聊天弹框。
			huise() {
				this.long = false;
				this.ceshi = false;
			},

			//手指按下改变浮窗颜色
			bColor1(e) {
				data.clickColor1 = 'rgb(226,226,226)';
			},
			//手指松开
			bColorEnd1() {
				data.clickColor1 = '';
			},
			//手指按下改变浮窗颜色
			bColor2(e) {
				data.clickColor2 = 'rgb(226,226,226)';
			},
			//手指松开
			bColorEnd2() {
				data.clickColor2 = '';
			},
			//手指按下改变浮窗颜色
			bColor3(e) {
				data.clickColor3 = 'rgb(226,226,226)';
			},
			//手指松开
			bColorEnd3() {
				data.clickColor3 = '';
			},
			//手指按下改变浮窗颜色
			bColor4(e) {
				data.clickColor4 = 'rgb(226,226,226)';
			},
			//手指松开
			bColorEnd4() {
				data.clickColor4 = '';
			},

			// 置顶
			// zhiding() {
			// 	// let index = this.arr.findIndex(function(item) {
			// 	// 	return item.id == v;
			// 	// });
			// 	// let newArr = this.arr.splice(index, 1);
			// 	// this.arr = newArr.concat(this.arr);
			// 	console.log('置顶');
			// },
			// // 取消置顶
			// qxzhiding() {
			// 	// let index = this.arr.findIndex(function(item) {
			// 	// 	return item.id == v;
			// 	// });
			// 	// let newArr = this.arr.splice(index, 1);
			// 	// this.arr = newArr.concat(this.arr);
			// 	console.log('取消置顶');
			// },

			// 获取最新值
			zuixin() {
				if (data.csArr.resArr.children.length) {
					data.arrc[0] = data.csArr.resArr.children[data.csArr.resArr.children.length - 1];
				}

				if (data.csArr2.resArr2.children.length) {
					data.arrc2[0] = data.csArr2.resArr2.children[data.csArr2.resArr2.children.length - 1];
				}
			},
			//执行 Ajax
			add() {
				http({
					url: '/zhangXi/listGet',
					data: {
						name: store.state.liujinchang.user.jobs
					}
				}).then(res => {
					if (res.data.code == 200) {
						let sss = [];
						let ce = [];
						let cj = [];
						let er;
						let cj2 = [];
						//筛选审批
						res.data.data[2].forEach(item => {
							if (item.superior == store.state.liujinchang.user.jobs) {
								sss.push(item);
							}
						});

						data.csArr = res.data.data[0];
						for (let i = 0; i < sss.length; i++) {
							for (let j = 0; j < res.data.data[0].resArr.children.length; j++) {
								if (sss[i].mun == res.data.data[0].resArr.children[j].mun) {
									cj.push(res.data.data[0].resArr.children[j]);
								}
							}
						}
						//筛选会议
						data.csArr2 = res.data.data[1];
						for (let i = 0; i < res.data.data[3].length; i++) {
							for (let j = 0; j < res.data.data[1].resArr2.children.length; j++) {
								if (res.data.data[3][i].meeting_num == res.data.data[1].resArr2.children[j].mun) {
									cj2.push(res.data.data[1].resArr2.children[j]);
								}
							}
						}
						//审批
						data.csArr.resArr.children = cj;
						store.commit('zhangxi/add', data.csArr.resArr.children);
						console.log('审批筛后', data.csArr.resArr.children);
						//会议
						data.csArr2.resArr2.children = cj2;
						store.commit('zhangxi/add2', data.csArr2.resArr2.children);
						console.log('会议筛后', data.csArr2.resArr2.children);

						let a = res.data.data[0].resArr.children.filter(v => {
							if (v.type != '已读') {
								return v;
							}
						});

						let b = res.data.data[1].resArr2.children.filter(v => {
							if (v.type != '已读') {
								return v;
							}
						});
						data.shenLength = a.length;
						data.huiLength = b.length;
						if (data.shenLength == 0) {
							data.shenLengthTr = false;
						} else {
							data.shenLengthTr = true;
						}
						if (data.huiLength == 0) {
							data.huiLengthTr = false;
						} else {
							data.huiLengthTr = true;
						}
						data.zuixin();
					}
				});
			},
			ajaxGet() {
				data.add();
			},
			yidu(i) {
				http({
					url: '/zhangXi/addRead',
					method: 'POST',
					data: {
						name: i
					}
				}).then(res => {
					if (res.data.code == 200) {
						data.add();
					}
				});
			}
		});
		// onMounted(() => {
		// 	console.log(store.state.liujinchang.user);
		// });

		// watch(
		// 	() => data.shenLength,
		// 	(xin, jiu) => {
		// 		if (xin == 0) {
		// 			data.shenLengthTr = false;
		// 		}
		// 	}
		// );
		return { ...toRefs(data) };
	},
	onShow() {
		this.add();
	}
};
</script>

<style lang="scss">
@import '@/static/font/iconfont.css';
page,
.top_boos {
	height: 100%;
}
.mes_top {
	.uniui-left {
		color: rgb(45, 140, 240) !important;
	}
}
// 消息灰色背景
.mes_ash {
	background: rgb(242, 242, 242);
	height: 100%;
	box-sizing: border-box;
	padding: 10rpx 0 0 0;

	// 消息白色背景
	.mes_news {
		background: #fff;
		box-sizing: border-box;
		padding: 0 0 0 20rpx;

		// 审批提醒
		.news_approval {
			border-bottom: 1px solid rgb(242, 242, 242);
			display: flex;
			align-items: center;
			height: 140rpx;

			// 圆形
			.news_approval_yuan {
				position: relative;
				margin: 0 20rpx 0 0;
				width: 88rpx;
				height: 88rpx;
				border-radius: 50px;
				line-height: 88rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				// background-image: linear-gradient(rgb(185, 238, 165), rgb(153, 228, 122));

				image {
					width: 88rpx;
					height: 88rpx;
				}
				text:nth-child(2) {
					display: inline-block;
					position: absolute;
					top: -5rpx;
					right: -5rpx;
					line-height: 32rpx;
					width: 32rpx;
					height: 32rpx;
					background: red;
					border-radius: 50px;
				}
			}
			.news_approval_xunhuan {
				display: flex;
				width: 100%;
				height: 140rpx;
				align-items: center;

				// 消息
				.news_approval_news {
					flex: 2;
					text:nth-child(1) {
						font-size: 30rpx;
						color: #333;
					}

					view:nth-child(2) {
						margin-top: 8rpx;
						font-size: 26rpx;
						color: #ccc;
					}
				}
			}

			// 时间
			.news_approval_time {
				flex: 1;
				color: #ccc;
				font-size: 26rpx;
			}
		}
	}
}
#suspension {
	position: absolute;
	background-color: #fff;
	width: 200rpx;
	text-align: center;
	// box-sizing: border-box;
	// padding: 0 10rpx;

	view {
		height: 80rpx;
		line-height: 80rpx;
	}
}
</style>
